<template>
  <div class="orders-content">
    <van-nav-bar
      class="page-nav-bar"
      title="我的订单"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 不同状态的订单 -->
    <van-tabs v-model="active">
      <van-tab v-for="(item,index) in typeList" :key="index" :title="item.title" :name="item.status">
        <order-list :status="item.status"></order-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import OrderList from './components/order-list'
export const typeList = [
  { status:'-1', title:'全部' },
  { status:'0', title:'待付款' },
  { status:'1', title:'待发货' },
  { status:'2', title:'已发货' },
  { status:'3', title:'已完成' },
  { status:'4', title:'已关闭' }
]
export default {
  name:'Order',
  components:{ OrderList  },
  data() {
    return {
      // 订单状态：-1->全部；0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭,可用值:-1,0,1,2,3,4
      typeList,
      active:this.$route.query.status
    }
  },
};
</script>

<style lang="less" scoped>
.orders-content {
  padding-top: 180px;
}
.page-nav-bar{
  position: fixed;
  top:0;
  width: 100%;
  z-index: 1000;
}
/deep/ .van-tabs__wrap {
  position:fixed;
  top: 92px;
  width: 100%;
  z-index: 1000;
}
.item {
  margin-top: 30px;
  background-color: #fff;
  .h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    .l {
      font-size: 30px;
    }
    .r {
      color: #e11c34;
      font-size: 26px;
    }
  }
}
.b {
  margin: 5px 30px 0px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;

  .d {
    height: 200px;
    display: flex;
    align-items: center;

    .l {
      width: 160px;
      height: 160px;
    }
    .r {
      display: flex;
      flex-direction: column;
      .title {
        font-size: 30px;
      }
      .count {
        margin-top: 10px;
        font-size: 28px;
        color: #999;
      }
    }
  }
}
.f {
  display: flex;
  justify-content: space-between;
  font-size: 32px;
  padding: 20px 50px 20px 30px;
  .l {
    padding-top: 10px;
  }
}
</style>